import React from 'react'
import Graph from 'components/Graph'
import AppStore from 'stores/application/crd'
import { observer, inject } from 'mobx-react'
import { trigger } from 'utils/action'

const data = {
  nodes: [
    {
      data: {
        id: 'a3d2605f03a601cd1ee616ac69bacaca',
        nodeType: 'app',
        cluster: 'Kubernetes',
        namespace: 'kubesphere-controls-system',
        workload: 'kubesphere-router-project',
        app: 'ingress-nginx',
        version: 'latest',
        traffic: [{ protocol: 'http', rates: { httpOut: '0.003' } }],
        isInaccessible: true,
        isOutside: true,
        isRoot: true,
        targetNamespace: 'project',
      },
    },
    {
      data: {
        id: '829adcbb61655a1e058134075e1386cd',
        parent: '890e27e578907b1a66af6255bd0d4e2b',
        nodeType: 'app',
        cluster: 'Kubernetes',
        namespace: 'project',
        workload: 'details-v1',
        app: 'details',
        version: 'v1',
        destServices: [
          { cluster: 'Kubernetes', namespace: 'project', name: 'details' },
        ],
        traffic: [{ protocol: 'http', rates: { httpIn: '0.001' } }],
      },
    },
    {
      data: {
        id: '48a7d6331b948034961c820b19ed6c85',
        parent: '890e27e578907b1a66af6255bd0d4e2b',
        nodeType: 'app',
        cluster: 'Kubernetes',
        namespace: 'project',
        workload: 'productpage-v1',
        app: 'productpage',
        version: 'v1',
        destServices: [
          { cluster: 'Kubernetes', namespace: 'project', name: 'productpage' },
        ],
        traffic: [
          { protocol: 'http', rates: { httpIn: '0.003', httpOut: '0.003' } },
        ],
      },
    },
    {
      data: {
        id: '7d7b0efc7c664c85e68bffcf15dded72',
        parent: '890e27e578907b1a66af6255bd0d4e2b',
        nodeType: 'app',
        cluster: 'Kubernetes',
        namespace: 'project',
        workload: 'reviews-v1',
        app: 'reviews',
        version: 'v1',
        destServices: [
          { cluster: 'Kubernetes', namespace: 'project', name: 'reviews' },
        ],
        traffic: [{ protocol: 'http', rates: { httpIn: '0.002' } }],
      },
    },
    {
      data: {
        id: '853a4da78b8ee355e9c105ca0356a016',
        nodeType: 'service',
        cluster: 'Kubernetes',
        namespace: 'project',
        app: 'details',
        service: 'details',
        destServices: [
          { cluster: 'Kubernetes', namespace: 'project', name: 'details' },
        ],
        traffic: [
          { protocol: 'http', rates: { httpIn: '0.001', httpOut: '0.001' } },
        ],
        hasRequestRouting: true,
        hasVS: { hostnames: ['details'] },
      },
    },
    {
      data: {
        id: '2eba4667aee5ee021c1fedff430102fd',
        nodeType: 'service',
        cluster: 'Kubernetes',
        namespace: 'project',
        app: 'productpage',
        service: 'productpage',
        destServices: [
          { cluster: 'Kubernetes', namespace: 'project', name: 'productpage' },
        ],
        traffic: [
          { protocol: 'http', rates: { httpIn: '0.003', httpOut: '0.003' } },
        ],
        hasRequestRouting: true,
        hasVS: { hostnames: ['productpage'] },
      },
    },
    {
      data: {
        id: '2965b01e10c3fa4ca000f189076681b6',
        nodeType: 'service',
        cluster: 'Kubernetes',
        namespace: 'project',
        app: 'reviews',
        service: 'reviews',
        destServices: [
          { cluster: 'Kubernetes', namespace: 'project', name: 'reviews' },
        ],
        traffic: [
          { protocol: 'http', rates: { httpIn: '0.002', httpOut: '0.002' } },
        ],
        hasRequestRouting: true,
        hasVS: { hostnames: ['reviews'] },
      },
    },
  ],
  edges: [
    {
      data: {
        id: 'bb912f9f6e37d1601a8a7d7316ba808a',
        source: '2965b01e10c3fa4ca000f189076681b6',
        target: '7d7b0efc7c664c85e68bffcf15dded72',
        responseTime: '24',
        traffic: {
          protocol: 'http',
          rates: { http: '0.002', httpPercentReq: '100.0' },
          responses: {
            '200': {
              flags: { '-': '100.0' },
              hosts: { 'reviews.project.svc.cluster.local': '100.0' },
            },
          },
        },
      },
    },
    {
      data: {
        id: 'bb598b8605bc666a5c67a4054c04d912',
        source: '2eba4667aee5ee021c1fedff430102fd',
        target: '48a7d6331b948034961c820b19ed6c85',
        responseTime: '75',
        traffic: {
          protocol: 'http',
          rates: { http: '0.003', httpPercentReq: '100.0' },
          responses: {
            '200': {
              flags: { '-': '100.0' },
              hosts: { 'productpage.project.svc.cluster.local': '100.0' },
            },
          },
        },
      },
    },
    {
      data: {
        id: 'fd25922564c0c603f6c52b74300845e8',
        source: '48a7d6331b948034961c820b19ed6c85',
        target: '2965b01e10c3fa4ca000f189076681b6',
        traffic: {
          protocol: 'http',
          rates: { http: '0.002', httpPercentReq: '66.7' },
          responses: {
            '200': {
              flags: { '-': '100.0' },
              hosts: { 'reviews.project.svc.cluster.local': '100.0' },
            },
          },
        },
      },
    },
    {
      data: {
        id: 'b10400cee40816716109a74421e3fefb',
        source: '48a7d6331b948034961c820b19ed6c85',
        target: '853a4da78b8ee355e9c105ca0356a016',
        traffic: {
          protocol: 'http',
          rates: { http: '0.001', httpPercentReq: '33.3' },
          responses: {
            '200': {
              flags: { '-': '100.0' },
              hosts: { 'details.project.svc.cluster.local': '100.0' },
            },
          },
        },
      },
    },
    {
      data: {
        id: 'a67b62c07d677dbf86c374eb10520119',
        source: '853a4da78b8ee355e9c105ca0356a016',
        target: '829adcbb61655a1e058134075e1386cd',
        responseTime: '6',
        traffic: {
          protocol: 'http',
          rates: { http: '0.001', httpPercentReq: '100.0' },
          responses: {
            '200': {
              flags: { '-': '100.0' },
              hosts: { 'details.project.svc.cluster.local': '100.0' },
            },
          },
        },
      },
    },
    {
      data: {
        id: '2ad26ed427aec0ef027837f298941bf9',
        source: 'a3d2605f03a601cd1ee616ac69bacaca',
        target: '2eba4667aee5ee021c1fedff430102fd',
        traffic: {
          protocol: 'http',
          rates: { http: '0.003', httpPercentReq: '100.0' },
          responses: {
            '200': {
              flags: { '-': '100.0' },
              hosts: { 'productpage.project.svc.cluster.local': '100.0' },
            },
          },
        },
      },
    },
  ],
}

const health = {
  details: {
    requests: { inbound: {}, outbound: {}, healthAnnotations: {} },
    workloadStatuses: [
      {
        name: 'details-v1',
        desiredReplicas: 1,
        currentReplicas: 1,
        availableReplicas: 1,
        syncedProxies: 1,
      },
    ],
    workloads: {
      'details-v1': {
        workloadStatus: {
          name: 'details-v1',
          desiredReplicas: 1,
          currentReplicas: 1,
          availableReplicas: 1,
          syncedProxies: 1,
        },
        requests: {
          inbound: { http: { '200': 0.0012980992118683356 } },
          outbound: {},
          healthAnnotations: {},
          errorRatio: 0,
        },
      },
    },
    service: {
      requests: {
        inbound: { http: { '200': 0.0012980992118683356 } },
        outbound: {},
        healthAnnotations: {},
        errorRatio: 0,
      },
    },
  },
  productpage: {
    requests: { inbound: {}, outbound: {}, healthAnnotations: {} },
    workloadStatuses: [
      {
        name: 'productpage-v1',
        desiredReplicas: 1,
        currentReplicas: 1,
        availableReplicas: 1,
        syncedProxies: 1,
      },
    ],
    workloads: {
      'productpage-v1': {
        workloadStatus: {
          name: 'productpage-v1',
          desiredReplicas: 1,
          currentReplicas: 1,
          availableReplicas: 1,
          syncedProxies: 1,
        },
        requests: {
          inbound: {
            http: {
              '200': 0.002688919796012981,
              '404': 0.00009272137227630968,
            },
          },
          outbound: { http: { '200': 0.0025059790965348437 } },
          healthAnnotations: {},
          errorRatio: 3.333333333333333,
        },
      },
    },
    service: {
      requests: {
        inbound: {
          http: { '200': 0.002688919796012981, '404': 0.00009272137227630968 },
        },
        outbound: {},
        healthAnnotations: {},
        errorRatio: 3.333333333333333,
      },
    },
  },
  ratings: {
    requests: { inbound: {}, outbound: {}, healthAnnotations: {} },
    workloadStatuses: [
      {
        name: 'ratings-v1',
        desiredReplicas: 1,
        currentReplicas: 1,
        availableReplicas: 1,
        syncedProxies: 1,
      },
    ],
    workloads: {
      'ratings-v1': {
        workloadStatus: {
          name: 'ratings-v1',
          desiredReplicas: 1,
          currentReplicas: 1,
          availableReplicas: 1,
          syncedProxies: 1,
        },
        requests: {
          inbound: {},
          outbound: {},
          healthAnnotations: {},
          errorRatio: null,
        },
      },
    },
    service: {
      requests: {
        inbound: {},
        outbound: {},
        healthAnnotations: {},
        errorRatio: null,
      },
    },
  },
  reviews: {
    requests: { inbound: {}, outbound: {}, healthAnnotations: {} },
    workloadStatuses: [
      {
        name: 'reviews-v1',
        desiredReplicas: 2,
        currentReplicas: 2,
        availableReplicas: 2,
        syncedProxies: -1,
      },
    ],
    workloads: {
      'reviews-v1': {
        workloadStatus: {
          name: 'reviews-v1',
          desiredReplicas: 2,
          currentReplicas: 2,
          availableReplicas: 2,
          syncedProxies: 1,
        },
        requests: {
          inbound: { http: { '200': 0.0012078798846665083 } },
          outbound: {},
          healthAnnotations: {},
          errorRatio: 0,
        },
      },
    },
    service: {
      requests: {
        inbound: { http: { '200': 0.0012078806483167566 } },
        outbound: {},
        healthAnnotations: {},
        errorRatio: 0,
      },
    },
  },
}

const store = {
  list: {
    page: 1,
    limit: 10,
    sortBy: '',
    ascending: false,
    silent: false,
    filters: {},
    data: [],
    total: 0,
    isLoading: true,
    selectedRowKeys: [],
  },
  module: 'applications',
  tracing: { data: [], total: 0 },
  graph: {
    data: {
      nodes: [
        {
          data: {
            id: 'a3d2605f03a601cd1ee616ac69bacaca',
            nodeType: 'app',
            cluster: 'Kubernetes',
            namespace: 'kubesphere-controls-system',
            workload: 'kubesphere-router-project',
            app: 'ingress-nginx',
            version: 'latest',
            traffic: [{ protocol: 'http', rates: { httpOut: '0.003' } }],
            isInaccessible: true,
            isOutside: true,
            isRoot: true,
            targetNamespace: 'project',
          },
        },
        {
          data: {
            id: '829adcbb61655a1e058134075e1386cd',
            parent: '890e27e578907b1a66af6255bd0d4e2b',
            nodeType: 'app',
            cluster: 'Kubernetes',
            namespace: 'project',
            workload: 'details-v1',
            app: 'details',
            version: 'v1',
            destServices: [
              { cluster: 'Kubernetes', namespace: 'project', name: 'details' },
            ],
            traffic: [{ protocol: 'http', rates: { httpIn: '0.001' } }],
          },
        },
        {
          data: {
            id: '48a7d6331b948034961c820b19ed6c85',
            parent: '890e27e578907b1a66af6255bd0d4e2b',
            nodeType: 'app',
            cluster: 'Kubernetes',
            namespace: 'project',
            workload: 'productpage-v1',
            app: 'productpage',
            version: 'v1',
            destServices: [
              {
                cluster: 'Kubernetes',
                namespace: 'project',
                name: 'productpage',
              },
            ],
            traffic: [
              {
                protocol: 'http',
                rates: { httpIn: '0.003', httpOut: '0.003' },
              },
            ],
          },
        },
        {
          data: {
            id: '7d7b0efc7c664c85e68bffcf15dded72',
            parent: '890e27e578907b1a66af6255bd0d4e2b',
            nodeType: 'app',
            cluster: 'Kubernetes',
            namespace: 'project',
            workload: 'reviews-v1',
            app: 'reviews',
            version: 'v1',
            destServices: [
              { cluster: 'Kubernetes', namespace: 'project', name: 'reviews' },
            ],
            traffic: [{ protocol: 'http', rates: { httpIn: '0.002' } }],
          },
        },
        {
          data: {
            id: '853a4da78b8ee355e9c105ca0356a016',
            nodeType: 'service',
            cluster: 'Kubernetes',
            namespace: 'project',
            app: 'details',
            service: 'details',
            destServices: [
              { cluster: 'Kubernetes', namespace: 'project', name: 'details' },
            ],
            traffic: [
              {
                protocol: 'http',
                rates: { httpIn: '0.001', httpOut: '0.001' },
              },
            ],
            hasRequestRouting: true,
            hasVS: { hostnames: ['details'] },
          },
        },
        {
          data: {
            id: '2eba4667aee5ee021c1fedff430102fd',
            nodeType: 'service',
            cluster: 'Kubernetes',
            namespace: 'project',
            app: 'productpage',
            service: 'productpage',
            destServices: [
              {
                cluster: 'Kubernetes',
                namespace: 'project',
                name: 'productpage',
              },
            ],
            traffic: [
              {
                protocol: 'http',
                rates: { httpIn: '0.003', httpOut: '0.003' },
              },
            ],
            hasRequestRouting: true,
            hasVS: { hostnames: ['productpage'] },
          },
        },
        {
          data: {
            id: '2965b01e10c3fa4ca000f189076681b6',
            nodeType: 'service',
            cluster: 'Kubernetes',
            namespace: 'project',
            app: 'reviews',
            service: 'reviews',
            destServices: [
              { cluster: 'Kubernetes', namespace: 'project', name: 'reviews' },
            ],
            traffic: [
              {
                protocol: 'http',
                rates: { httpIn: '0.002', httpOut: '0.002' },
              },
            ],
            hasRequestRouting: true,
            hasVS: { hostnames: ['reviews'] },
          },
        },
      ],
      edges: [
        {
          data: {
            id: 'bb912f9f6e37d1601a8a7d7316ba808a',
            source: '2965b01e10c3fa4ca000f189076681b6',
            target: '7d7b0efc7c664c85e68bffcf15dded72',
            responseTime: '24',
            traffic: {
              protocol: 'http',
              rates: { http: '0.002', httpPercentReq: '100.0' },
              responses: {
                '200': {
                  flags: { '-': '100.0' },
                  hosts: { 'reviews.project.svc.cluster.local': '100.0' },
                },
              },
            },
          },
        },
        {
          data: {
            id: 'bb598b8605bc666a5c67a4054c04d912',
            source: '2eba4667aee5ee021c1fedff430102fd',
            target: '48a7d6331b948034961c820b19ed6c85',
            responseTime: '75',
            traffic: {
              protocol: 'http',
              rates: { http: '0.003', httpPercentReq: '100.0' },
              responses: {
                '200': {
                  flags: { '-': '100.0' },
                  hosts: { 'productpage.project.svc.cluster.local': '100.0' },
                },
              },
            },
          },
        },
        {
          data: {
            id: 'fd25922564c0c603f6c52b74300845e8',
            source: '48a7d6331b948034961c820b19ed6c85',
            target: '2965b01e10c3fa4ca000f189076681b6',
            traffic: {
              protocol: 'http',
              rates: { http: '0.002', httpPercentReq: '66.7' },
              responses: {
                '200': {
                  flags: { '-': '100.0' },
                  hosts: { 'reviews.project.svc.cluster.local': '100.0' },
                },
              },
            },
          },
        },
        {
          data: {
            id: 'b10400cee40816716109a74421e3fefb',
            source: '48a7d6331b948034961c820b19ed6c85',
            target: '853a4da78b8ee355e9c105ca0356a016',
            traffic: {
              protocol: 'http',
              rates: { http: '0.001', httpPercentReq: '33.3' },
              responses: {
                '200': {
                  flags: { '-': '100.0' },
                  hosts: { 'details.project.svc.cluster.local': '100.0' },
                },
              },
            },
          },
        },
        {
          data: {
            id: 'a67b62c07d677dbf86c374eb10520119',
            source: '853a4da78b8ee355e9c105ca0356a016',
            target: '829adcbb61655a1e058134075e1386cd',
            responseTime: '6',
            traffic: {
              protocol: 'http',
              rates: { http: '0.001', httpPercentReq: '100.0' },
              responses: {
                '200': {
                  flags: { '-': '100.0' },
                  hosts: { 'details.project.svc.cluster.local': '100.0' },
                },
              },
            },
          },
        },
        {
          data: {
            id: '2ad26ed427aec0ef027837f298941bf9',
            source: 'a3d2605f03a601cd1ee616ac69bacaca',
            target: '2eba4667aee5ee021c1fedff430102fd',
            traffic: {
              protocol: 'http',
              rates: { http: '0.003', httpPercentReq: '100.0' },
              responses: {
                '200': {
                  flags: { '-': '100.0' },
                  hosts: { 'productpage.project.svc.cluster.local': '100.0' },
                },
              },
            },
          },
        },
      ],
    },
    health: {
      details: {
        requests: { inbound: {}, outbound: {}, healthAnnotations: {} },
        workloadStatuses: [
          {
            name: 'details-v1',
            desiredReplicas: 1,
            currentReplicas: 1,
            availableReplicas: 1,
            syncedProxies: 1,
          },
        ],
        workloads: {
          'details-v1': {
            workloadStatus: {
              name: 'details-v1',
              desiredReplicas: 1,
              currentReplicas: 1,
              availableReplicas: 1,
              syncedProxies: 1,
            },
            requests: {
              inbound: { http: { '200': 0.0012980992118683356 } },
              outbound: {},
              healthAnnotations: {},
              errorRatio: 0,
            },
          },
        },
        service: {
          requests: {
            inbound: { http: { '200': 0.0012980992118683356 } },
            outbound: {},
            healthAnnotations: {},
            errorRatio: 0,
          },
        },
      },
      productpage: {
        requests: { inbound: {}, outbound: {}, healthAnnotations: {} },
        workloadStatuses: [
          {
            name: 'productpage-v1',
            desiredReplicas: 1,
            currentReplicas: 1,
            availableReplicas: 1,
            syncedProxies: 1,
          },
        ],
        workloads: {
          'productpage-v1': {
            workloadStatus: {
              name: 'productpage-v1',
              desiredReplicas: 1,
              currentReplicas: 1,
              availableReplicas: 1,
              syncedProxies: 1,
            },
            requests: {
              inbound: {
                http: {
                  '200': 0.002688919796012981,
                  '404': 0.00009272137227630968,
                },
              },
              outbound: { http: { '200': 0.0025059790965348437 } },
              healthAnnotations: {},
              errorRatio: 3.333333333333333,
            },
          },
        },
        service: {
          requests: {
            inbound: {
              http: {
                '200': 0.002688919796012981,
                '404': 0.00009272137227630968,
              },
            },
            outbound: {},
            healthAnnotations: {},
            errorRatio: 3.333333333333333,
          },
        },
      },
      ratings: {
        requests: { inbound: {}, outbound: {}, healthAnnotations: {} },
        workloadStatuses: [
          {
            name: 'ratings-v1',
            desiredReplicas: 1,
            currentReplicas: 1,
            availableReplicas: 1,
            syncedProxies: 1,
          },
        ],
        workloads: {
          'ratings-v1': {
            workloadStatus: {
              name: 'ratings-v1',
              desiredReplicas: 1,
              currentReplicas: 1,
              availableReplicas: 1,
              syncedProxies: 1,
            },
            requests: {
              inbound: {},
              outbound: {},
              healthAnnotations: {},
              errorRatio: null,
            },
          },
        },
        service: {
          requests: {
            inbound: {},
            outbound: {},
            healthAnnotations: {},
            errorRatio: null,
          },
        },
      },
      reviews: {
        requests: { inbound: {}, outbound: {}, healthAnnotations: {} },
        workloadStatuses: [
          {
            name: 'reviews-v1',
            desiredReplicas: 2,
            currentReplicas: 2,
            availableReplicas: 2,
            syncedProxies: -1,
          },
        ],
        workloads: {
          'reviews-v1': {
            workloadStatus: {
              name: 'reviews-v1',
              desiredReplicas: 2,
              currentReplicas: 2,
              availableReplicas: 2,
              syncedProxies: 1,
            },
            requests: {
              inbound: { http: { '200': 0.0012078798846665083 } },
              outbound: {},
              healthAnnotations: {},
              errorRatio: 0,
            },
          },
        },
        service: {
          requests: {
            inbound: { http: { '200': 0.0012078806483167566 } },
            outbound: {},
            healthAnnotations: {},
            errorRatio: 0,
          },
        },
      },
    },
  },
  detail: {
    workspace: 'demo-workspace',
    cluster: 'host',
    namespace: 'project',
    name: 'bookinfo',
    uid: 'a95ab2e3-e239-473c-8dfe-167a2fd6e9ec',
    creator: 'admin',
    description: '书籍评分应用',
    aliasName: '',
    createTime: '2022-12-05T05:07:50Z',
    resourceVersion: '16888533',
    isFedManaged: false,
    version: 'v1',
    icon: '/assets/bookinfo.svg',
    labels: {
      'app.kubernetes.io/name': 'bookinfo',
      'app.kubernetes.io/version': 'v1',
    },
    annotations: {
      'kubesphere.io/creator': 'admin',
      'kubesphere.io/description': '书籍评分应用',
      'servicemesh.kubesphere.io/enabled': 'true',
    },
    selector: {
      'app.kubernetes.io/name': 'bookinfo',
      'app.kubernetes.io/version': 'v1',
    },
    serviceMeshEnable: true,
    status: 'Running',
    services: ['details', 'productpage', 'ratings', 'reviews'],
    workloads: ['details-v1', 'productpage-v1', 'ratings-v1', 'reviews-v1'],
    updateTime: '2022-12-28T03:13:09Z',
    _originData: {
      apiVersion: 'app.k8s.io/v1beta1',
      kind: 'Application',
      metadata: {
        annotations: {
          'kubesphere.io/creator': 'admin',
          'kubesphere.io/description': '书籍评分应用',
          'servicemesh.kubesphere.io/enabled': 'true',
        },
        labels: {
          'app.kubernetes.io/name': 'bookinfo',
          'app.kubernetes.io/version': 'v1',
        },
        name: 'bookinfo',
        namespace: 'project',
      },
      spec: {
        addOwnerRef: true,
        componentKinds: [
          { group: '', kind: 'Service' },
          { group: 'apps', kind: 'Deployment' },
          { group: 'apps', kind: 'StatefulSet' },
          { group: 'extensions', kind: 'Ingress' },
          { group: 'servicemesh.kubesphere.io', kind: 'Strategy' },
          { group: 'servicemesh.kubesphere.io', kind: 'ServicePolicy' },
        ],
        descriptor: { icons: [{ src: '/assets/bookinfo.svg' }] },
        selector: {
          matchLabels: {
            'app.kubernetes.io/name': 'bookinfo',
            'app.kubernetes.io/version': 'v1',
          },
        },
      },
    },
  },
  isLoading: false,
  isSubmitting: false,
  ksVersion: 3.1,
  isTracingLoading: true,
  env: { data: {}, isLoading: false },
}

@inject('rootStore')
@observer
@trigger
export default class GraphComponent extends React.Component {
  constructor(props) {
    super(props)
    this.store = new AppStore()
    this.state = {
      data1: undefined,
      health1: undefined,
    }
  }

  async componentDidMount() {
    const params = {
      cluster: 'host',
      name: 'bookinfo',
      namespace: 'project',
      workspace: 'demo-workspace',
    }
    await this.store.fetchDetail(params)
    this.store
      .fetchGraph({
        ...params,
        app: params.name,
        duration: 604800,
      })
      .then(() => {
        this.setState({
          data1: this.store.graph.data,
          health1: this.store.graph.health1,
        })
      })

    console.log(this.store, this.store.fetchGraph, 'this.store')
  }

  render() {
    const { data1, health1 } = this.state
    console.log(data1, health1, 'rrrrrrrrrr')
    return (
      <div style={{ height: 'calc(100% - 50px)' }}>
        <Graph
          fullScreen={false}
          data={data1}
          health={health1}
          store={this.store}
          loading={false}
          onFetch={() => {}}
        />
      </div>
    )
  }
}
